import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Popconfirm, Divider, Table, Input, Form, Row, Col, message as msg, Button } from 'antd';
import styles from '../Common/TableList.less';

@connect(({ dictIndex, loading }) => ({
  query: dictIndex.query,
  list: dictIndex.list,
  loading: loading.effects['dictIndex/fetch'],
}))
class DictIndexList extends PureComponent {
  columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, record, index) => index + 1,
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '编码',
      dataIndex: 'code',
    },
    {
      title: '分组',
      dataIndex: 'groupCode',
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (text, record) => (
        <span>
          <a
            onClick={() => {
              this.handleViewValues(record);
            }}
          >
            查看字典
          </a>
          <Divider type="vertical" />
          <a
            onClick={() => {
              this.handleEdit(record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <Popconfirm
            title="确认删除？"
            onConfirm={() => {
              this.handleRemove(record);
            }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'dictIndex/fetch' });
  }

  handleViewValues = record => {
    const { onViewValues } = this.props;
    if (onViewValues) onViewValues(record);
  };

  handleEdit = record => {
    const { onEdit } = this.props;
    if (onEdit) onEdit(record);
  };

  handleRemove = record => {
    const { dispatch } = this.props;
    dispatch({ type: 'dictIndex/remove', payload: record.id }).then(({ code, message }) => {
      if (code === 0) {
        msg.success('删除成功');
        dispatch({ type: 'dictIndex/fetch' });
      } else {
        msg.error(message);
      }
    });
  };

  handleSearch = query => {
    const { dispatch } = this.props;
    dispatch({ type: 'dictIndex/fetch', payload: { ...query, page: 0 } });
  };

  handleReset = () => {
    const { dispatch } = this.props;
    dispatch({ type: 'dictIndex/reload' });
  };

  handleTableChange = pagination => {
    const { current, pageSize } = pagination;
    const { dispatch } = this.props;
    dispatch({ type: 'dictIndex/fetch', payload: { page: current - 1, size: pageSize } });
  };

  renderForm = () => {
    const { query } = this.props;
    return (
      <Form layout="inline">
        <Row gutter={16}>
          <Col md={6}>
            <Form.Item label="名称">
              <Input
                allowClear
                placeholder="请输入名称"
                value={query.name}
                onChange={e => {
                  const { value } = e.target;
                  this.handleSearch({ name: value });
                }}
              />
            </Form.Item>
          </Col>
          <Col md={6}>
            <Form.Item label="编码">
              <Input
                allowClear
                placeholder="请输入编码"
                value={query.code}
                onChange={e => {
                  const { value } = e.target;
                  this.handleSearch({ code: value });
                }}
              />
            </Form.Item>
          </Col>
          <Col md={6}>
            <Form.Item label="分组">
              <Input
                allowClear
                placeholder="请输入分组值"
                value={query.groupCode}
                onChange={e => {
                  const { value } = e.target;
                  this.handleSearch({ groupCode: value });
                }}
              />
            </Form.Item>
          </Col>
          <Button style={{ marginLeft: 5 }} onClick={this.handleReset}>
            重置
          </Button>
        </Row>
      </Form>
    );
  };

  render() {
    const { list, loading } = this.props;
    return (
      <div>
        <div className={styles.tableListForm}>{this.renderForm()}</div>
        <Table
          rowKey="id"
          size="middle"
          columns={this.columns}
          loading={loading}
          dataSource={list.data}
          pagination={list.pagination}
          onChange={this.handleTableChange}
          onRow={(record) => {
            return {
              onClick: () => this.handleViewValues(record),       // 点击行
            };
          }}
        />
      </div>
    );
  }
}

export default DictIndexList;
